<template>
  <div class="page-score-order-list mod-score-order">
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="dataForm"
        @submit.prevent
        @keyup.enter="onGetDataList(page)"
      >
        <div class="input-row">
          <el-form-item :label="$t('order.number') + ':'">
            <el-input
              v-model="dataForm.orderNumber"
              :placeholder="$t('order.number')"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('order.status') + ':'">
            <el-select
              v-model="status"
              clearable
              :placeholder="$t('order.statusMsg')"
              @change="onOrderStatus"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('order.theRecipientSName') + ':'">
            <el-input
              v-model="dataForm.receiver"
              style="min-width: 240px"
              :placeholder="$t('order.pleaseEnRecipName')"
              clearable
            />
          </el-form-item>

          <el-form-item :label="$t('order.contactTel') + ':'">
            <el-input
              v-model="dataForm.mobile"
              style="min-width: 350px"
              :placeholder="$t('order.pleaseEnterNumber')"
              clearable
              type="number"
              class="myinput-appearance"
            />
          </el-form-item>
          <el-form-item :label="$t('order.createTime') + ':'">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              :default-time="[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
              ]"
              clearable
              range-separator="—"
              value-format="YYYY-MM-DD HH:mm:ss"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
            />
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn"
              @click="onSetDateRange(1)"
            >
              {{ $t("date.t") }}
            </div>
            <div
              class="default-btn"
              @click="onSetDateRange(2)"
            >
              {{ $t("date.y") }}
            </div>
            <div
              class="default-btn"
              @click="onSetDateRange(3)"
            >
              {{ $t("date.n") }}
            </div>
            <div
              class="default-btn"
              @click="onSetDateRange(4)"
            >
              {{ $t("th") }}
            </div>
          </el-form-item>

          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t("order.query") }}
            </div>
            <!-- <el-button @click="showConsignmentInfo()"
                    type="primary"
          >导出待发货订单</el-button>-->
            <div
              class="default-btn"
              @click="onClear()"
            >
              {{ $t("order.clear") }}
            </div>
            <div
              class="default-btn"
              @click="onGetSoldExcel()"
            >
              {{ $t("order.export") }}
            </div>

            <div
              class="default-btn"
              @click="onUploadSpu"
            >
              {{ $t("order.BulkShipping") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container main">
      <div class="content">
        <!-- 导航 -->
        <div class="status-nav clearfix">
          <ul
            :class="[
              'status-nav',
              'clearfix',
              showHeadScroll ? 'status-nav-bottom' : '',
            ]"
          >
            <li
              :class="['nav-item', sts == 0 ? 'selected' : '']"
              data-sts="0"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                {{ $t("date.a") }}
              </p>
            </li>
            <li
              :class="['nav-item', sts == 1 ? 'selected' : '']"
              data-sts="1"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                {{ $t("order.pendingPayment") }}
              </p>
            </li>
            <li
              :class="['nav-item', sts == 2 ? 'selected' : '']"
              data-sts="2"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                {{ $t("order.toBeShipped") }}
              </p>
            </li>
            <li
              :class="['nav-item', sts == 3 ? 'selected' : '']"
              data-sts="3"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                {{ $t("order.pendingReceipt") }}
              </p>
            </li>
            <li
              :class="['nav-item', sts == 5 ? 'selected' : '']"
              data-sts="5"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                {{ $t("order.successfulTransaction") }}
              </p>
            </li>
            <li
              :class="['nav-item', sts == 6 ? 'selected' : '']"
              data-sts="6"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                {{ $t("order.transactionFailed") }}
              </p>
            </li>
            <!-- <li
              :class="['nav-item', sts == 7 ? 'selected' : '']"
              data-sts="7"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">{{ $t("group.groupType") }}</p>
            </li> -->
            <li
              :class="['nav-item', sts == 8 ? 'selected' : '']"
              data-sts="8"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                待审核
              </p>
            </li>
            <li
              :class="['nav-item', sts == 9 ? 'selected' : '']"
              data-sts="9"
              @click="onSelectNav($event)"
            >
              <p class="li-txt">
                审核失败
              </p>
            </li>
          </ul>
          <ul class="nav-right" />
        </div>

        <!-- 列标题 -->
        <div
          :class="[
            'tit',
            showHeadScroll
              ? sidebarFold
                ? 'fixed-top-fold'
                : 'fixed-top'
              : '',
          ]"
        >
          <el-row style="width: 100%; flex-wrap: nowrap">
            <el-col :span="7">
              <span class="item product">{{ $t("order.product") }}</span>
            </el-col>
            <el-col
              :span="3"
              class="transaction-price"
            >
              <span class="item">{{ $t("order.transaQuantity") }}</span>
            </el-col>
            <el-col
              :span="2"
              class="column-title"
            >
              <span class="item">{{ $t("order.paymentAmount") }}</span>
            </el-col>
            <el-col
              :span="2"
              class="column-title"
            >
              <span class="item">{{ $t("order.paymentMethod") }}</span>
            </el-col>
            <el-col
              :span="2"
              class="column-title"
            >
              <span class="item">兑换人</span>
            </el-col>
            <el-col
              :span="3"
              class="column-title"
            >
              <span class="item">{{ $t("order.buyerConsignee") }}</span>
            </el-col>
            <el-col
              :span="2"
              class="column-title"
            >
              <span class="item">{{ $t("order.orderStatus") }}</span>
            </el-col>
            <!-- <el-col :span="2" class="column-title">
              <span class="item">{{ $t("order.afterSale") }}</span>
            </el-col> -->
            <el-col
              :span="3"
              class="column-title"
            >
              <span class="item">{{ $t("order.operation") }}</span>
            </el-col>
          </el-row>
        </div>

        <div
          v-for="order in dataList"
          :key="order.orderId"
          class="prod"
        >
          <div class="prod-tit">
            <span>{{ $t("order.number") }}：{{ order.orderNumber }}</span>
            <span>{{ $t("order.createTime") }}：{{ order.createTime }}</span>
            <span>{{ $t("prodList.shopName") }}：{{ order.shopName }}</span>
            <!-- <span>买家：19999999999</span>
            <span >联系电话：19999999999</span>-->
          </div>
          <div class="prod-cont">
            <el-row style="width: 100%">
              <el-col :span="10">
                <div class="prod-item">
                  <div
                    v-for="orderItem in order.orderItems"
                    :key="orderItem.orderItemId"
                    class="items name"
                  >
                    <div class="prod-image">
                      <img
                        :src="checkFileUrl(orderItem.pic)"
                        @error="onHandlePicError"
                      >
                    </div>
                    <div class="prod-name">
                      <div class="prod-con">
                        <div class="prod-name-txt">
                          {{ orderItem.prodName }}
                        </div>
                        <div
                          v-if="order.status > 0 && order.status < 8"
                          class="order-status"
                        >
                          {{
                            [
                              "",
                              $t("order.pendingPayment"),
                              $t("order.toBeShipped"),
                              $t("order.pendingReceipt"),
                              "",
                              $t("order.successfulTransaction"),
                              $t("order.transactionFailed"),
                              $t("group.waitGroup"),
                            ][order.status]
                          }}
                        </div>
                        <!-- <div
                          class="order-status"
                          v-if="order.status > 0 && order.status < 8"
                        >{{['','待付款','待发货','待收货','','交易成功','交易失败','待成团'][order.status]}}</div>-->
                        <!-- <span class="prod-info">{{orderItem.skuName}}</span> -->
                      </div>
                    </div>
                    <div class="prod-price">
                      <span>{{ orderItem.price.toFixed(2) }}</span>
                      <span>{{ orderItem.prodCount }}{{ $t("order.piece") }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="2"
                style="height: 100%"
              >
                <div class="item">
                  <div>
                    <span class="totalprice">{{ $t("order.monetaryUnit")
                    }}{{ order.actualTotal.toFixed(2)
                    }}{{
                      order.score && order.score > 0
                        ? "+ " + order.score + " " + $t("order.score")
                        : ""
                    }}</span>
                    <span
                      v-if="order.freightAmount"
                      class="totalprice"
                    >（{{ $t("order.includingFreight") }}：{{
                      $t("order.monetaryUnit")
                    }}{{ order.freightAmount.toFixed(2) }}）</span>
                    <span>{{ $t("order.total") }} {{ order.productNums }}
                      {{ $t("order.piece") }}</span>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="2"
                style="height: 100%"
              >
                <div class="item">
                  <div>
                    <span
                      v-if="
                        (!order.payType && order.payType != 0) ||
                          order.status === 1
                      "
                    >{{ $t("order.unpaid") }}</span>
                    <span v-else>{{
                      [
                        $t("order.pointsPayment"),
                        $t("order.wecProPay"),
                        $t("order.alipayPCPayment"),
                        $t("order.wechatScanCodePayment"),
                        $t("order.wechatH5Payment"),
                        $t("order.weclAccountPay"),
                        $t("order.alipayH5Payment"),
                        $t("order.alipayAPPPayment"),
                        $t("order.wechatAPPPayment"),
                        $t("order.balancePayment"),
                        $t("order.payPalPayment"),
                      ][order.payType]
                    }}</span>
                    <!-- <span
                      v-else
                    >{{['积分支付','微信小程序支付','支付宝PC端支付','微信扫码支付','微信H5支付','微信公众号支付','支付宝H5支付','支付宝APP支付','微信APP支付','用户余额支付','PayPal支付'][order.payType]}}</span>-->
                  </div>
                </div>
              </el-col>
              <el-col
                :span="2"
                style="height: 100%"
              >
                <div class="item">
                  <div
                    class="default-btn text-btn operate-btn marLeftNo block"
                    @click="onViewUser(order)"
                  >
                    {{ order.nickName || '--' }}
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%"
              >
                <div class="item">
                  <div class="buyer-info">
                    <div class="buyer-name">
                      {{ order.userAddrOrder.receiver }}
                    </div>
                    <div class="buyer-phone">
                      {{ order.userAddrOrder.mobile }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="2"
                style="height: 100%"
              >
                <div class="item">
                  <!-- <span v-if="order.refundStatus === 1"  type="danger">退款申请中</span> -->
                  <span>
                    <span
                      v-if="order.status === 1"
                      type="danger"
                    >{{
                      $t("order.pendingPayment")
                    }}</span>
                    <span
                      v-else-if="order.status === 2"
                      type="danger"
                    >{{
                      $t("order.toBeShipped")
                    }}</span>
                    <span
                      v-else-if="order.status === 3"
                      type="danger"
                    >{{
                      $t("order.pendingReceipt")
                    }}</span>
                    <span
                      v-else-if="order.status === 7"
                      type="danger"
                    >{{
                      $t("group.waitGroup")
                    }}</span>
                    <span
                      v-else-if="order.status === 5"
                      type="danger"
                    >{{
                      $t("order.successfulTransaction")
                    }}</span>
                    <span v-else-if="order.status === 6">{{
                      $t("order.transactionFailed")
                    }}</span>
                    <span v-else-if="order.status === 8">待审核</span>
                    <span v-else-if="order.status === 9">审核失败</span>
                  </span>
                </div>
              </el-col>
              <!-- <el-col :span="2" style="height: 100%">
                <div class="item">
                  <span
                    v-if="order.refundStatus === 1"

                    type="danger"
                    >{{ $t("order.requestingRefund") }}</span
                  >
                  <span
                    v-else-if="order.refundStatus === 2"

                    type="danger"
                    >{{ $t("order.refundsuccessfully") }}</span
                  >
                  <span
                    v-else-if="order.refundStatus === 3"

                    type="danger"
                    >{{ $t("order.partialRefundSucc") }}</span
                  >
                  <span
                    v-else-if="order.refundStatus === 4"

                    type="danger"
                    >{{ $t("order.refundFailed") }}</span
                  >
                  <span v-else  type="danger">{{
                    $t("order.noAfterSales")
                  }}</span>
                </div>
              </el-col> -->
              <el-col
                :span="3"
                style="height: 100%"
              >
                <div class="item">
                  <div class="operate">
                    <!-- <button onclick="">打印订单</button><br> -->
                    <div
                      class="default-btn text-btn operate-btn"
                      @click="onAddOrUpdate(order.orderNumber)"
                    >
                      {{ $t("order.seeDetails") }}
                    </div>
                    <div
                      class="default-btn text-btn operate-btn marLeftNo block"
                      @click="onToImbox(order)"
                    >
                      {{ $t("order.contactBuyer") }}
                    </div>
                    <div
                      v-if="
                        order.status === 2 &&
                          (!order.refundStatus || order.refundStatus === 4)
                      "
                      class="default-btn text-btn operate-btn marLeftNo"
                      @click="onChangeOrder(order)"
                    >
                      {{ $t("order.delivery") }}
                    </div>
                    <!-- 退款信息 -->
                    <div
                      v-if="order.refundStatus"
                      class="default-btn text-btn"
                      @click="onRefundRoute(order.orderNumber)"
                    >
                      {{ $t("order.refundInformation") }}
                    </div>
                    <div
                      v-if="
                        order.status == 3 &&
                          (!order.refundStatus || order.refundStatus > 2) &&
                          order.isOnlineDelivery === 0
                      "
                      class="default-btn text-btn marLeftNo"
                      @click="onReviseLogistics(order.orderNumber)"
                    >
                      {{ $t("delivery.modifyLogistics") }}
                    </div>
                    <!-- 删除订单 -->
                    <div
                      v-if="order.status != 8"
                      class="default-btn text-btn operate-btn marLeftNo block"
                      @click="onDelOrder(order.orderNumber)"
                    >
                      删除
                    </div>
                    <div
                      v-if="order.status == 8"
                      class="default-btn text-btn operate-btn marLeftNo block"
                      @click="onApprove(order)"
                    >
                      审核
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div
            v-if="order.status == 9"
            class="remark"
          >
            <div class="buyer-remark">
              <span>备注: {{ order.shopRemarks || '--' }}</span>
            </div>
          </div>
        </div>
        <div
          v-if="!dataList.length"
          class="empty"
        >
          {{ $t("order.noData") }}
        </div>
      </div>
    </div>
    <el-pagination
      v-if="dataList.length"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onSizeChangeHandle"
      @current-change="onCurrentChangeHandle"
    />
    <order-delivery-update
      v-if="devyVisible"
      ref="orderDeliveryUpdateRef"
      @refresh-order-delivery-update="onGetDataList"
    />
    <!-- 修改物流弹窗 -->
    <el-dialog
      v-model="logVisible"
      :title="$t('delivery.modifyLogistics')"
      :close-on-click-modal="false"
      class="LogModification"
      width="50%"
      @closed="onHandleClose"
    >
      <!-- 修改 -->
      <div
        v-if="isReviseLog"
        class="revise-log"
      >
        <div class="change-logistics">
          <div class="warning">
            {{ $t("delivery.ifModifyTheLog") }}
          </div>
          <div class="log-list">
            <div
              v-for="(logItem, index) in logisticsInfo"
              :key="index"
              class="item"
            >
              <div class="i-tit">
                <div class="big">
                  {{ $t("delivery.package") }}{{ index + 1 }}
                </div>
                <div class="text">
                  {{ $t("delivery.total") }} {{ logItem.productNums }}
                  {{ $t("marketing.item") }}{{ $t("order.product") }}
                </div>
              </div>

              <el-form
                ref="logDataFormRef"
                :model="logDataForm"
                label-width="95px"
                @submit.prevent
                @keyup.enter="onLogDataFormSubmit()"
              >
                <el-form-item
                  :label="$t('delivery.deliveryMethod') + '：'"
                  style="text-align: left"
                >
                  <el-radio-group v-model="logItem.tempDeliveryType">
                    <el-radio
                      v-model="radio"
                      :label="1"
                      disabled
                    >
                      {{ $t("delivery.needLogistics") }}
                    </el-radio>
                    <el-radio
                      v-model="radio"
                      :label="3"
                      disabled
                    >
                      {{ $t("order.noNeedRequired") }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <!--配送方式 线上 线下-->
                <el-form-item
                  v-if="logItem.tempDeliveryType === 1"
                  :label="$t('order.delType') + '：'"
                  style="text-align: left"
                >
                  <el-radio-group v-model="logItem.deliveryType">
                    <el-radio
                      :label="0"
                      disabled
                    >
                      {{ $t("order.onlineDelivery") }}
                    </el-radio>
                    <el-radio
                      :label="1"
                      disabled
                    >
                      {{ $t("order.selfDelivery") }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <div
                  v-if="
                    logItem.deliveryType !== 3 && logItem.deliveryType !== 0
                  "
                  class="info-int"
                >
                  <el-form-item
                    :label="$t('delivery.courierCompany') + '：'"
                    class="form-item"
                  >
                    <div
                      v-if="logVisible"
                      class="con"
                    >
                      <select-lazy v-model="logItem.dvyId" />
                    </div>
                  </el-form-item>
                  <el-form-item
                    :label="$t('delivery.trackingNumber') + '：'"
                    class="form-item"
                  >
                    <el-input
                      v-model="logItem.dvyFlowId"
                      controls-position="right"
                      :min="0"
                      maxlength="20"
                      :class="['int-frame', errorNum == 1 ? 'errortip' : '']"
                    />
                    <!-- :label="$t('order.trackingNumber')" -->
                  </el-form-item>
                </div>
                <div
                  v-if="logItem.deliveryType === 0"
                  class="info-int"
                >
                  <el-form-item
                    :label="$t('order.courierCompany') + '：'"
                    class="form-item"
                    style="text-align: left"
                  >
                    <div
                      v-if="logVisible"
                      class="con"
                    >
                      {{ deliveryCompanyType[logItem.dvyId - 1]?.label }}
                    </div>
                  </el-form-item>
                  <el-form-item
                    :label="$t('order.trackingNumber') + '：'"
                    class="form-item"
                  >
                    {{ logItem.dvyFlowId }}
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 确认 -->
      <div
        v-if="!isReviseLog"
        class="change-logistics"
      >
        <div class="warning">
          {{ $t("delivery.ifModifyTheLog") }}
        </div>
        <el-table
          header-cell-class-name="table-header"
          row-class-name="table-row"
          :data="confirmList"
        >
          <!-- <div v-for="(item,index) in confirmList" :key="index"> -->
          <el-table-column
            property="dvyIdName"
            :label="$t('delivery.packageName')"
            width="220"
            style="text-align: left"
          />
          <el-table-column
            property="productNums"
            :label="$t('delivery.amountOfGoods')"
            width="140"
          />
          <el-table-column
            property="delMethod"
            :label="$t('delivery.deliveryMethod')"
            width="140"
          />
          <el-table-column
            property="dvyName"
            :label="$t('delivery.logisticsCompany')"
            width="170"
          />
          <el-table-column
            property="dvyFlowId"
            :label="$t('delivery.trackingNumber')"
          />
          <!-- </div> -->
        </el-table>
      </div>

      <template #footer>
        <div
          v-if="isReviseLog"
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="logVisible = false"
          >
            {{ $t("crud.filter.cancelBtn") }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onLogDataFormSubmit()"
          >
            {{ $t("distribution.save") }}
          </div>
        </div>
        <div
          v-if="!isReviseLog"
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="onBackToRevise()"
          >
            {{ $t("delivery.backToModify") }}
          </div>
          <div
            class="default-btn primary-btn"
            type="primary"
            @click="onConfirmRevise()"
          >
            {{ $t("delivery.confirmTheChanges") }}
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 批量发货弹窗 -->
    <order-upload
      v-if="uploadVisible"
      ref="spuUploadRef"
      :param="dataForm"
      @refresh-data-list1="onGetWaitingConsignmentExcel"
    />

    <el-dialog
      v-model="auditDialogVisible"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      width="40%"
      title="审核"
    >
      <div class="content">
        <el-form
          ref="auditformRef"
          label-width="auto"
          :model="auditform"
          :rules="auditformRules"
          @submit.prevent
        >
          <el-form-item
            label="审核结果"
            prop="result"
          >
            <el-radio-group
              v-model="auditform.result"
              @change="(v) => {
                auditformRules.reason[0].required = v === 1
              }"
            >
              <el-radio :label="0">
                通过
              </el-radio>
              <el-radio :label="1">
                不通过
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="备注"
            prop="reason"
          >
            <el-input
              v-model="auditform.reason"
              type="textarea"
              :rows="3"
              maxlength="150"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="auditDialogVisible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onApproveSubmit"
          >
            {{ $t('shopProcess.submit') }}
          </div>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="userVisible"
      destroy-on-close
      width="500"
      title="会员信息"
    >
      <div
        class="content"
        style="padding: 0 20px"
      >
        <el-form
          ref="auditformRef"
          label-width="auto"
          :model="userForm"
        >
          <el-form-item
            label="会员昵称"
          >
            <span>{{ userForm.nickName }}</span>
          </el-form-item>
          <el-form-item
            label="真实姓名"
          >
            <span>{{ userForm.realName }}</span>
          </el-form-item>
          <el-form-item
            label="身份"
          >
            <span>{{ userForm.identity }}</span>
          </el-form-item>
          <el-form-item
            label="公司"
          >
            <span>{{ userForm.company }}</span>
          </el-form-item>
          <el-form-item
            label="职位"
          >
            <span>{{ userForm.position }}</span>
          </el-form-item>
          <el-form-item
            label="工作证照"
          >
            <el-image
              :src="checkFileUrl(userForm.workPermit)"
              :preview-src-list="[checkFileUrl(userForm.workPermit)]"
              style="width: 100px; height: 100px;"
            >
              <template #error>
                <div class="image-slot">
                  <img
                    src="@/assets/img/def.png"
                    alt=""
                  >
                </div>
              </template>
            </el-image>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import OrderDeliveryUpdate from './components/delivery-update.vue'
import moment from 'moment'
import OrderUpload from './components/upload.vue'

const sts = ref(0)
const dataForm = ref({})
const dateRange = ref([])
const status = ref(null)
const options = [
  {
    value: 1,
    label: $t('order.pendingPayment')
  },
  {
    value: 2,
    label: $t('order.toBeShipped')
  },
  {
    value: 3,
    label: $t('order.pendingReceipt')
  },
  {
    value: 5,
    label: $t('order.successfulTransaction')
  },
  {
    value: 6,
    label: $t('order.transactionFailed')
  },
  {
    value: 8,
    label: '待审核'
  },
  {
    value: 9,
    label: '审核失败'
  }
]
const deliveryCompanyType = [
  {
    value: 1,
    label: '顺丰速运'
  },
  {
    value: 2,
    label: '京东快递'
  },
  {
    value: 3,
    label: '圆通速递'
  },
  {
    value: 4,
    label: '韵达快递'
  },
  {
    value: 5,
    label: '中通快递'
  },
  {
    value: 6,
    label: '申通快递'
  },
  {
    value: 7,
    label: '百世快递'
  },
  {
    value: 8,
    label: 'EMS'
  }
]

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
// 确认修改弹窗
const isReviseLog = ref(true) // 是否正在修改物流信息
const confirmList = ref([]) // 确认修改信息
const radio = ref('1')
const logVisible = ref(false)
const logDataForm = reactive({
  dvyId: '', // 当前物流公司id
  dvyFlowId: '', // 物流单号
  dvyNames: [] // 物流公司列表
})
const logisticsInfo = ref([]) // 包裹列表
const showHeadScroll = ref(false) // 修改物流相关
const devyVisible = ref(false)
const uploadVisible = ref(false)
let oldPar = {}
let tempSearchForm = null
const errorNum = ref('')

const commonStore = useCommonStore()
const sidebarFold = computed({
  get () {
    return commonStore.sidebarFold
  },
  set (val) {
    commonStore.updateSidebarFold(val)
  }
})

onActivated(() => {
  // 携带参数查询
  const query = useRoute().query
  if (Object.keys(query).length > 0) {
    onGetDataList(page, query)
  }
})
onMounted(() => {
  // 携带参数查询
  onGetDataList(page, useRoute().query)

  // 请求物流公司
  getLogisticsList()

  // 监听页面滚动
  window.addEventListener('scroll', scrollToTop)
})
onUnmounted(() => {
  // 页面销毁时移除监听
  window.removeEventListener('scroll', scrollToTop)
})

const onHandlePicError = (event) => {
  event.target.src = require('@/assets/img/def.png')
}
/**
 * 页面滚动事件
 */
const scrollToTop = () => {
  const scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop
  showHeadScroll.value = scrollTop > 400
}
/**
 * 发货
 */
const orderDeliveryUpdateRef = ref(null)
const onChangeOrder = (order) => {
  devyVisible.value = true
  nextTick(() => {
    orderDeliveryUpdateRef.value?.init(order)
  })
}
/**
 * 获取数据列表
 */
const onGetDataList = (pageParam, params, type = 0, newData = false) => {
  let par = Object.assign(
    {
      orderNumber: dataForm.value.orderNumber,
      // 'prodName': dataForm.value.prodName,
      shopName: dataForm.value.shopName,
      receiver: dataForm.value.receiver,
      mobile: dataForm.value.mobile,
      status: status.value,
      refundStatus: dataForm.value.refundStatus,
      startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
      endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
    },
    params
  )
  if (type === 0) {
    oldPar = par
  } else {
    par = oldPar
  }
  if (newData || !tempSearchForm) {
    tempSearchForm = JSON.parse(JSON.stringify(par))
  }
  pageParam = pageParam === undefined ? page : pageParam
  http({
    url: http.adornUrl('/score/order/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(tempSearchForm, {
        status: status.value,
        current: pageParam == null ? page.currentPage : pageParam.currentPage,
        size: pageParam == null ? page.pageSize : pageParam.pageSize
      }),
      false
    )
  }).then(({ data }) => {
    dataList.value = data.records
    onHandleDataList()
    page.total = data.total
    sts.value = !status.value ? 0 : status.value

    // 末尾页数据为空重新请求
    if (!dataList.value.length && page.currentPage > 1) {
      page.currentPage = 1
      onGetDataList()
    }
  })
}
const onHandleDataList = () => {
  dataList.value.forEach((order) => {
    let isOnlineDelivery = 1
    for (let i = 0; i < order.orderItems.length; i++) {
      if (order.orderItems[i].dvyType === 1) {
        isOnlineDelivery = 0
        break
      }
    }
    order.isOnlineDelivery = isOnlineDelivery
  })
}
// 每页数
const onSizeChangeHandle = (val) => {
  page.pageSize = val
  page.currentPage = 1
  onGetDataList(page, {}, 1)
}
// 当前页
const onCurrentChangeHandle = (val) => {
  page.currentPage = val
  onGetDataList(page, {}, 1)
}

/**
 * 导航选择状态
 */
const onSelectNav = (e) => {
  page.currentPage = 1
  const _sts = e.currentTarget.dataset.sts
  sts.value = parseInt(_sts)
  status.value = sts.value === 0 ? null : parseInt(_sts)
  onGetDataList(page)
}
const onOrderStatus = (val) => {
  status.value = val
}
/**
 * 根据选项设置时间
 * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
 */
const onSetDateRange = (val) => {
  let startDay = null
  let endDay = null
  if (val === 1) {
    startDay = 0
    endDay = 0
  } else if (val === 2) {
    startDay = -1
    endDay = -1
  } else if (val === 3) {
    startDay = -7
    endDay = -1
  } else if (val === 4) {
    startDay = -30
    endDay = -1
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days').format('LL')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days').format('LL')
  dateRange.value = [startTime, endTime]
}
// 新增 / 修改
const router = useRouter()
const onAddOrUpdate = (val) => {
  router.push({
    path: '/member/score/order/info',
    query: {
      orderNumber: val
    }
  })
}
// 退款路由跳转
const routerStore = useRouterStore()
const onRefundRoute = (val) => {
  routerStore.updateIncludePageList('order-orderRefund')
  routerStore.pushHisPageList('order-orderRefund')
  router.push({
    path: '/order/order-refund/index',
    query: { orderNumber: val }
  })
}
/**
 * 关闭 修改物流弹窗
 */
const onHandleClose = () => {
  isReviseLog.value = true
}
// 前往消息盒子
const onToImbox = (order) => {
  const url = router.resolve({
    name: 'message-box',
    query: {
      userId: order.userId,
      orderNumber: order.orderNumber
    }
  }).href
  window.open(url, 'view_window')
}
// 清空按钮
const onClear = () => {
  dataForm.value = {}
  dateRange.value = []
  status.value = null
}
/**
 * 获取包裹物流信息
 */
const onReviseLogistics = (orderNumber) => {
  logVisible.value = !logVisible.value
  http({
    url: http.adornUrl(
      '/platform/orderDelivery/getOrderDeliveries/' + orderNumber
    ),
    method: 'put'
  }).then(({ data }) => {
    logisticsInfo.value = data
    logisticsInfo.value.forEach((el, index) => {
      el.tempDeliveryType =
        el.deliveryType === 1 || el.deliveryType === 0 ? 1 : el.deliveryType
      el.newDvyFlowId = el.dvyFlowId
      el.newDvyId = el.dvyId
      el.dvyIdName = $t('order.package') + Number(index + 1)
      // 修改弹窗
      confirmList.value = [] // 清空确认列表
    })
  })
  errorNum.value = 0
  // console.log(logisticsInfo.value)
}
/**
 * 请求物流公司列表
 */
const getLogisticsList = () => {
  http({
    url: http.adornUrl('/platform/delivery/list'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    logDataForm.dvyNames = data
  })
}

/**
 * 点击保存
 */
const onLogDataFormSubmit = () => {
  //  let reviseLogList = []
  let flag = true
  const _logisticsInfo = logisticsInfo.value
  _logisticsInfo.map((el) => {
    if (el.deliveryType === 3 || el.deliveryType === 0) {
      return el
    }
    if (!flag) {
      return false
    }
    // console.log('logisticsInfo.value', el.logisticsInfo.value)
    // console.log('el.dvyFlowId', el.dvyFlowId)
    const reg = /^[a-zA-Z0-9]{4,30}$/
    if (el.dvyFlowId.length === 0) {
      ElMessage({
        message: $t('order.logEmpty'),
        type: 'warning'
      })
      flag = false
      errorNum.value = 1
      // throw ('物流单号不能为空')
      // return false
    } else if (!reg.test(el.dvyFlowId)) {
      ElMessage({
        message: $t('order.checkDvyId'),
        type: 'warning'
      })
      flag = false
      errorNum.value = 1
    } else {
      errorNum.value = 0
      // console.log(el.newDvyFlowId)
      const _confirmList = confirmList.value
      if (
        (el.newDvyFlowId.length !== 0 && el.newDvyFlowId !== el.dvyFlowId) ||
        el.newDvyId !== el.dvyId
      ) {
        _confirmList.push(el)
        _confirmList.forEach((el) => {
          el.delMethod = $t('delivery.logistics')
          // el.packageName = "包裹" + Number(index+1)
          logDataForm.dvyNames.forEach((dvyName) => {
            if (el.dvyId === dvyName.dvyId) {
              el.dvyName = dvyName.dvyName
            }
          })
        })
        confirmList.value = _confirmList
      }
    }
    // console.log('确认列表:', confirmList)
    // confirmList.forEach((el, index) => {

    // })
    return el
  })
  // console.log(errorNum.value)
  if (errorNum.value === 1) {
    return
  } else if (confirmList.value.length === 0) {
    ElMessage({
      message: $t('order.noLogIsChanged'),
      type: 'warning'
    })
    flag = false
  }
  if (flag) {
    isReviseLog.value = false // 修改弹窗
  }
}
/**
 * 确认修改物流信息
 */
const onConfirmRevise = () => {
  // let dvyOrderParam = {
  //   deliveryOrders: confirmList.value
  // }
  http({
    url: http.adornUrl('/platform/orderDelivery/updateOrderDeliveries'),
    method: 'put',
    data: http.adornData({
      deliveryOrders: confirmList.value
    }),
    params: http.adornParams()
  }).then(() => {
    ElMessage({
      message: $t('publics.operation'),
      type: 'success'
    })
    isReviseLog.value = true
    logVisible.value = false
  })
}
/**
 * 返回修改（物流信息）
 */
const onBackToRevise = () => {
  isReviseLog.value = true
  // 修改弹窗
  confirmList.value = [] // 清空确认列表
}
// 搜索查询
const onSearch = (newData = false) => {
  page.currentPage = 1
  onGetDataList(page, null, 0, newData)
}
const onGetSoldExcel = () => {
  if (!dateRange.value || dateRange.value.length < 2) {
    ElMessage.error($t('order.pleExpOrderFirst'))
    return
  }
  ElMessageBox.confirm($t('order.exportReport'), $t('remindPop.remind'), {
    confirmButtonText: $t('remindPop.confirm'),
    cancelButtonText: $t('remindPop.cancel'),
    type: 'warning'
  }).then(() => {
    const loading = ElLoading.service({
      lock: true,
      target: '.main-container',
      customClass: 'export-load',
      background: 'transparent',
      text: $t('shop.exportIng')
    })
    http({
      url: http.adornUrl('/score/order/soldExcel'),
      method: 'get',
      params: http.adornParams({
        orderNumber: dataForm.value.orderNumber,
        // 'prodName': dataForm.value.prodName,
        shopName: dataForm.value.shopName,
        receiver: dataForm.value.receiver,
        mobile: dataForm.value.mobile,
        status: status.value,
        refundStatus: dataForm.value.refundStatus,
        startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
        endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
      }),
      responseType: 'blob' // 解决文件下载乱码问题
    })
      .then(({ data }) => {
        loading.close()
        const blob = new Blob([data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        })
        const fileName = $t('order.orderInfCollationXls')
        const elink = document.createElement('a')
        if ('download' in elink) {
          // 非IE下载
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
      .catch((e) => {
        loading.close()
      })
  })
}
const onGetWaitingConsignmentExcel = () => {
  onGetDataList(page)
}
const spuUploadRef = ref(null)
const onUploadSpu = () => {
  dataForm.value.startTime =
    dateRange.value === null ? null : dateRange.value[0]
  dataForm.value.endTime = dateRange.value === null ? null : dateRange.value[1]
  uploadVisible.value = true
  nextTick(() => {
    spuUploadRef.value?.init()
  })
}

const onDelOrder = (orderNumber) => {
  ElMessageBox.confirm('确认删除订单嘛?', '提示', {
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/score/order/safeDelete'),
      method: 'put',
      params: http.adornParams({
        orderNumber
      })
    }).then(() => {
      ElMessage({
        message: $t('publics.operation'),
        type: 'success'
      })
      onGetDataList(page)
    })
  })
}

const auditform = ref({})
const auditformRules = ref({
  result: [
    { required: true, message: '审核结果不能为空', trigger: 'change' }
  ],
  reason: [
    { required: false, message: '备注不能为空', trigger: 'blur' }
  ]
})
const auditDialogVisible = ref(false)
const onApprove = (row) => {
  auditDialogVisible.value = true
  auditform.value = {
    orderNumber: row.orderNumber,
    result: 0,
    reason: ''
  }
}

const auditformRef = ref(null)
const onApproveSubmit = () => {
  auditformRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    http({
      url: http.adornUrl('/score/order/audit'),
      method: 'post',
      data: http.adornData({
        ...auditform.value
      })
    }).then(() => {
      ElMessage({
        message: $t('publics.operation'),
        type: 'success'
      })
      auditDialogVisible.value = false
      onGetDataList(page)
    })
  })
}

const userForm = ref({})
const userVisible = ref(false)
const onViewUser = (row) => {
  userVisible.value = true
  userForm.value = row.exchangeUser || {}
}
</script>

<style lang="scss" scoped>
.page-score-order-list {
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-button + .el-button {
    margin-left: 0 !important;
    display: block;
  }
  :deep(.export-load) {
    top: -50% !important;
  }

  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    *zoom: 1;
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

  // .el-form-item {
  //   margin-bottom: 10px !important;
  // }
  :deep(input.el-input__inner) {
    // border: 0;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }

  &.mod-score-order {
    .main {
      .status-nav {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        height: 40px;
        border-bottom: 1px solid #ddd;
        line-height: 40px;
        & > ul {
          list-style-type: none;
          padding-left: 0;
          margin: 0;
        }
        .nav-item {
          float: left;
          height: 40px;
          line-height: 40px;
          background: #f7f8fa;
          border: 1px solid #ddd;
          padding: 0 20px;
          margin: 0 -1px -1px 0;
          cursor: pointer;
        }

        .li-txt {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 0;
        }

        .nav-item:first-child {
          border-left: 1px solid #ddd;
        }

        .selected {
          background: #fff;
          border-bottom: none;
        }
      }

      .status-nav-bottom {
        margin-bottom: 72px;
      }

      .tit {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        background: #f7f8fa;
        z-index: 11;
        height: 57px;
        font-weight: bold;
      }

      .fixed-top {
        position: fixed;
        width: calc(100% - 310px);
        min-width: 890px;
        top: 90px;
      }

      .fixed-top-fold {
        position: fixed;
        width: calc(100% - 160px);
        min-width: 1040px;
        top: 90px;
      }

      .column-title {
        text-align: center;
      }

      .transaction-price {
        text-align: right;
        min-width: 140px;
      }
    }

    .prod {
      margin-bottom: 15px;
    }

    .tit {
      display: flex;
      height: 45px;
      align-items: center;
    }

    .tit .item {
      padding: 0 10px;
      width: 10%;
      text-align: center;
    }

    .tit .product {
      width: 25%;
    }

    .prod-tit {
      padding: 10px;
      background: #f8f8f9;
      border-left: 1px solid #dddee1;
      border-top: 1px solid #dddee1;
      border-right: 1px solid #dddee1;
    }

    .prod-tit span {
      margin-right: 15px;
    }

    .prod-cont {
      display: flex;
      border-top: 1px solid #dddee1;
      border-bottom: 1px solid #dddee1;
      border-left: 1px solid #dddee1;
      color: #495060;
    }

    .prod-cont .item {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      // width: 10%;
      border-right: 1px solid #dddee1;
      text-align: center;
      height: 100%;
    }

    .prod-cont .item span {
      display: block;
    }

    .prod-cont .prod-item {
      // width: 38%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #dddee1;
    }

    .prod-name {
      // display: flex;
      // align-items: center;
      width: 55%;
      text-align: left;
      vertical-align: middle;
    }

    .prod-con {
      display: block;
      padding: 0 !important;

      .prod-name-txt {
        padding-right: 10px;
        box-sizing: border-box;
        display: -webkit-box;
        word-break: break-word;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .prod-price {
      position: absolute;
      right: 10px;
      text-align: center;
    }

    .prod-price span {
      display: block;
    }

    .prod-price span:first-child {
      margin-bottom: 10px;
    }

    .buyer-info {
      display: block;
      width: 100%;
    }

    .buyer-name {
      margin-bottom: 10px;
    }

    .order-status {
      display: inline-block;
      margin-top: 15px;
      padding: 2px 4px;
      border: 1px solid #e43130;
      border-radius: 2px;
      color: #e43130;
    }

    .prod-cont .items.name {
      display: flex;
      align-items: center;
      position: relative;
      padding: 10px;
      // height: 100px;
      border-bottom: 1px solid #dddee1;
    }

    .prod-cont .items.name:last-child {
      border-bottom: none;
    }

    .prod-image {
      margin-right: 20px;
      width: 80px;
      height: 80px;
    }

    .prod-image img {
      width: 100%;
      height: 100%;
    }

    // .item span {
    //   display: block;
    //   margin-bottom: 10px;
    // }
    .totalprice {
      margin-bottom: 10px;
    }

    .item .operate {
      color: #2d8cf0;
    }

    .item .totalprice {
      color: #c00;
    }

    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .el-form-item {
      margin-bottom: 20px !important;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .el-form-item__label {
      width: 100px;
    }
  }

  .empty {
    display: block;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: #aaa;
  }

  // 修改物流弹窗
  .change-logistics {
    color: #333;
    padding: 0 20px;
  }

  // .change-logistics,
  // .revise-log {
  //   max-height: 300px;
  //   overflow-y: auto;
  // }
  .LogModification {
    .i-tit {
      margin-bottom: 10px;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .el-button + .el-button {
      display: inline-block;
      margin-left: 10px !important;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    input.el-input__inner {
      border: 0 !important;
    }

    .log-list {
      max-height: 600px;
      overflow-y: auto;
    }
  }

  .change-logistics .warning {
    padding: 10px;
    border: 1px solid #f1924e;
    background: #fff5ed;
  }

  .change-logistics .item {
    padding-bottom: 20px;
  }

  .change-logistics .item .i-tit {
    display: flex;
    align-items: center;
  }

  .change-logistics .item .i-tit .big {
    font-weight: 600;
    margin-right: 15px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .label {
    width: 80px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con {
    display: flex;
    align-items: center;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-radio {
    margin-right: 10px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-radio input,
  .change-logistics .item .i-con .con .con-radio span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-radio input[type="radio"] {
    margin-left: 5px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-text {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }

  .change-logistics .item .i-con .con .con-text .text {
    width: 80px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-text input[type="text"] {
    border: 1px solid #ddd;
    padding: 0 10px;
    height: 30px;
    width: 160px;
    border-radius: 2px;
  }

  // 修改物流弹窗end

  // 修改物流信息弹窗
  .log-list {
    margin-top: 30px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-form-item__label {
    // text-align: left;
    width: 100px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-form-item {
    margin-bottom: 0;
    // margin-top: 10px;
  }

  .info-int {
    display: flex;
  }

  .form-item {
    margin-right: 15px;
  }

  .int-frame {
    // border-radius: 0;
    border: 0;
    // border: 1px solid #ddd;
  }

  //
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .info-int .el-form-item__content,
  .info-int .el-form-item__label,
  .el-input__suffix-inner,
  .el-input__icon {
    height: 32px;
    line-height: 32px;
  }

  // 修改物流信息弹窗end
  // 确认修改
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-table .cell {
    text-align: center;
  }

  .errortip {
    border-color: #e43130;
  }

  .block {
    display: block !important;
  }

  .marLeftNo {
    margin-left: 0 !important;
  }

  div :deep(.el-row) {
    display: flex;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .mod-score-order
    .search-bar
    .input-row
    .myinput-appearance
    > input::-webkit-outer-spin-button,
  .mod-score-order
    .search-bar
    .input-row
    .myinput-appearance
    > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}

.remark{
  border: 1px solid #ccc;
  border-top: 0;
  padding: 10px;
}
</style>
